<template>
  <view class="recharge-page">
    <view class="header">
      <view class="title">充值中心</view>
    </view>
    
    <view class="section">
      <view class="section-title">选择券类型</view>
      <view class="coupon-type-selector">
        <view 
          class="coupon-type-item" 
          :class="{ active: selectedCouponType === 'A' }" 
          @tap="selectedCouponType = 'A'"
        >
          <text>A券</text>
        </view>
        <view 
          class="coupon-type-item" 
          :class="{ active: selectedCouponType === 'B' }" 
          @tap="selectedCouponType = 'B'"
        >
          <text>B券</text>
        </view>
      </view>
    </view>
    
    <view class="section">
      <view class="section-title">充值金额</view>
      <view class="coupon-type-selector">
        <view 
          class="coupon-type-item" 
          v-for="(item, index) in amountList"
          :class="{ active: selectedCouponAmount === item.value }" 
          @tap="selectedCouponAmount = item.value"
        >
          <text>{{item.label}}</text>
        </view>
      </view>
      <view class="amount-input">
        <text class="currency">¥</text>
        <input 
          type="digit" 
          class="input" 
          v-model="amount" 
          placeholder="请输入充值金额"
        />
      </view>
    </view>
    
    <view class="submit-btn" @tap="handleSubmit">确定充值</view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';

// definePageConfig({
//   navigationBarTitleText: '充值',
// });

Taro.setNavigationBarTitle({
  title: '充值'
})


const selectedCouponType = ref('A');
const amount = ref('');

const amountList = [
  { label: '100元', value: 100 },
  { label: '500元', value: 500 },
  { label: '1000元', value: 1000 },
];
const selectedCouponAmount = ref(amountList[0].value);

const handleSubmit = () => {
  if (!amount.value) {
    Taro.showToast({
      title: '请输入充值金额',
      icon: 'none'
    });
    return;
  }
  
  const amountNum = parseFloat(amount.value);
  if (isNaN(amountNum) || amountNum <= 0) {
    Taro.showToast({
      title: '请输入有效金额',
      icon: 'none'
    });
    return;
  }
  
  Taro.showModal({
    title: '充值确认',
    content: `您选择了${selectedCouponType.value}券，充值金额为¥${amountNum.toFixed(2)}`,
    success: (res) => {
      if (res.confirm) {
        // 这里可以添加实际的充值API调用
        Taro.showToast({
          title: '充值成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              Taro.navigateBack();
            }, 2000);
          }
        });
      }
    }
  });
};
</script>

<style lang="scss">
.recharge-page {
  min-height: 100vh;
  background-color: #f6f9ff;
  padding: 30rpx;
  
  .header {
    margin-bottom: 40rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    
    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }
    
    .coupon-type-selector {
      display: flex;
      gap: 20rpx;
      
      .coupon-type-item {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        border: 2rpx solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #666;
        
        &.active {
          background: hsl(17, 98%, 51%);
          color: #fff;
          border-color: hsl(17, 98%, 51%);
        }
      }
    }
    
    .amount-input {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      padding-bottom: 20rpx;
      margin-top: 20rpx;
      
      .currency {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-right: 10rpx;
      }
      
      .input {
        flex: 1;
        font-size: 40rpx;
        height: 80rpx;
      }
    }
  }
  
  .submit-btn {
    height: 90rpx;
    border-radius: 45rpx;
    background: hsl(17, 98%, 51%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 60rpx;
  }
}
</style>